<template>
  <div class="orderlist animate__animated animate__bounceInLeft">
    <div ref="odiv">
      <el-table
        ref="multipleTable"
        tooltip-effect="dark"
        :data="orderListA.length == 0 ? orderList : orderListA"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="45"> </el-table-column>
        <el-table-column label="系统订单号" width="120">
          <template slot-scope="scope">
            <span>{{ scope.row.dingdanhao }}</span>
          </template>
        </el-table-column>
        <el-table-column label="下单时间" width="170">
          <template slot-scope="scope">
            <span>{{ scope.row.maijiagoumaishijian }}</span>
          </template>
        </el-table-column>
        <el-table-column label="买家id/名称" width="200">
          <template slot-scope="scope">
            <span
              >{{ scope.row.maijiaweixin }}/{{
                scope.row.maijiayonghuming
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="商品图片" width="80">
          <template slot-scope="scope">
            <img
              style="width: 45px; height: 43px"
              :src="scope.row.imag"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column label="商品标题" width="240">
          <template slot-scope="scope">
            <span>{{ scope.row.xinxi }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品件数" width="90">
          <template slot-scope="scope">
            <span>{{ scope.row.dingdanshuliang }}件</span>
          </template>
        </el-table-column>
        <el-table-column label="实付金额" width="90">
          <template slot-scope="scope">
            <span>{{ scope.row.jiage }}元</span>
          </template>
        </el-table-column>
        <el-table-column label="系统状态" width="90">
          <template slot-scope="scope">
            <span>{{ scope.row.zhuangtai ? "已发货" : "待发货" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="结算状态" width="90">
          <template slot-scope="">
            <span>待结算</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button
              type="info"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              ref="button"
              >订单详情</el-button
            >
            <el-button
              size="mini"
              type="danger"
              :plain="true"
              @click="handleDelete(scope.$index, scope.row)"
              >订单取消</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="fenye">
      <el-pagination
        background
        layout="total,prev, pager, next"
        :total="orderList.length"
        @current-change="shangyiye"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
// import { Loading } from 'element-ui';
import { Message } from 'element-ui';
Vue.prototype.$message = Message;
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {
    };
  },
  async mounted() {
    await this.orderInfo();
    // if (this.orderList.length === 0) {
    //   Loading.service(this.$refs.odiv).close();
    // }
  },
  computed: {
    ...mapState("indent", ["orderList", "orderListA"]),
  },
  methods: {
    ...mapActions("indent", ["orderInfo", "fenYeId"]),
    ...mapMutations("indent", ["listChange",'delOrder']),
    handleEdit(index, row) {
      this.$router.push(`/indent/${row.dingdanhao}`);
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.delOrder(row)
      this.$message('您成功取消一条订单');
    },
    handleSelectionChange(val) {
      this.listChange(val);
    },
    shangyiye(val) {
      this.fenYeId(val - 1);
    },
  },
};
</script>

<style lang="scss" scoped>
.orderlist {
  position: relative;
  width: 83vw;
  border-radius: 5px;
  margin: 0 auto;
  border: 1px solid #fff;
  box-shadow: #999 0px 0px 20px;
  margin-bottom: 40px;
  padding-bottom: 60px;
  .el-button {
    width: 80px;
    height: 36px;
    border-radius: 6px;
  }
  .fenye {
    position: absolute;
    right: 130px;
    bottom: -85px;
  }
}
</style>